<template>
  <SearchModule :items="searchItems" @search="handleSearch" @add-row="handleAddRow" />
  <TableModule
    :model-url="modelUrl"
    :items="tableItems"
    :list="table.list"
    :page-current="table.pageCurrent"
    :page-size="table.pageSize"
    :total="table.total"
    @update-row="handleUpdateRow"
    @remove-back="handleTableRemove"
    @page-change="handlePageChange"
  />
  <FormModule ref="moduleForm" :model-name="modelName" :model-url="modelUrl" :items="formItems" :task="form.task"
              @submit="handleFormSubmit"
  />
</template>

<script lang="ts">
import SearchModule from './components/SearchModule.vue'
import TableModule from './components/TableModule.vue'
import FormModule from './components/FormModule.vue'

import { defineComponent, ref, reactive, onMounted } from 'vue'
// import { useMessage } from '@/hooks/useMessage'
import { listApi } from '@/api/component/searchTable'
export default defineComponent({
  name: 'Person',
  components: {
    SearchModule,
    TableModule,
    FormModule,
  },
  props: {
    // 模型名称
    modelName: {
      type: String,
      required: true,
    },
    // 模型url
    modelUrl: {
      type: String,
      required: true,
    },
    // 查询字段配置
    searchItems: {
      type: Array,
      default: () => {return []},
      // required: true,
    },
    // 表格字段配置
    tableItems: {
      type: Array,
      default: () => {return []},
      // required: true,
    },
    // 表单字段配置
    formItems: {
      type: Array,
      default: () => {return []},
      // required: true,
    },
  },
  setup(props) {
    // form子组件
    const moduleForm = ref()

    // 查询数据
    const search = reactive({
      name: '',
      gender: '',
    })
    // 表格数据
    const table = reactive({
      primaryKey: 'id',
      list: [],
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
    })
    // 表单数据
    const form = reactive({
      Visible: true,
      task: 'add',
    })

    // 查询列表
    const searchList = () => {
      const param = {
        ...search,
        pageCurrent: table.pageCurrent,
        pageSize: table.pageSize,
      }
      listApi(props.modelUrl, param)
        .then((resp) => {
          const { data } = resp
          table.list = data.list
          table.total = data.total
        })
    }

    // 查询回调函数
    const handleSearch = (searchData: any) => {
      search.name = searchData.name
      search.gender = searchData.gender
      table.pageCurrent = 1
      table.pageSize = 10
      searchList()
    }

    // 添加数据
    const handleAddRow = () => {
      form.task = 'add'
      moduleForm.value.open()
    }

    // 修改数据
    const handleUpdateRow = async (row) => {
      form.task = 'update'
      moduleForm.value.open(row.id)
    }
    // 删除数据
    const handleTableRemove = () => {
      console.log('click deleteRow')
      searchList()
    }
    // 处理分页变化
    function handlePageChange({pageCurrent, pageSize}){
      if (pageCurrent) {
        table.pageCurrent = pageCurrent
      }
      if (pageSize) {
        table.pageCurrent = 1
        table.pageSize = pageSize
      }
      searchList()
    }

    // 处理表单成功提交回调
    const handleFormSubmit = () => {
      console.log('handleFormSubmit')
      searchList()
    }

    onMounted(() => {
      searchList()
    })

    return {
      table,
      form,
      moduleForm,

      handleSearch,

      handleAddRow,
      handleUpdateRow,
      handleTableRemove,
      handlePageChange,

      handleFormSubmit,
    }
  },
})
</script>

<style lang="scss" scoped>
//
</style>
